<script src="./detail.js"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="./detail.less" lang="less" scoped></style>

<template>
    <div class="detail">
        <div class="top">
            <img src="~assets/img/detail-bg-1.jpg">
            <div class="area">
                <div class="round">参与人员</div>
                <div class="image">
                    <img v-bind:src="image"/>
                </div>
                <div class="name">{{name}}</div>
                <div class="number">{{num}}票</div>
                <div class="btn" v-on:click="vote()">投TA一票</div>
            </div>
        </div>
        <div class="bottom">
            <div class="round">活动介绍</div>
            <div class="explain">
                <img src="~assets/img/detail.png">
                <div>
                    <label>发起单位：</label>南都健康大讲堂&德视佳眼科<br>
                    <label>参与对象：</label>全世界的近视党<br>
                    <label>报名时间：</label>2017年4月25日-5月9日<br>
                    <label>参与方式：</label>点击进入报名页面，填写报名资料，<br>审核通过后即可参与竞选投票。最终网络票选结果<br>第一名为本次活动的优胜者。
                    <p>注：活动解释权归主办方所有</p>
                </div>
            </div>
            <router-link to="/sign">
                <div class="c-btn">我也要报名</div>
            </router-link>
        </div>

        <my-component ref="alerts"></my-component>
    </div>
</template>
